<template>
  <a-card :bordered="false">
    <div>
      <!--表头条件搜索  -->
      <a-form-model layout="inline" :model="caseform">
        <a-form-model-item
          ><a-input placeholder="case编号" style="width: 150px" v-model="caseform.caseId"></a-input
        ></a-form-model-item>
        <a-form-model-item>
          <a-select placeholder="请选择项目组" v-model="caseform.projectId" style="width: 150px">
            <a-select-option v-for="(projectTeam, index) in projectTeams" :key="index + 1">{{
              projectTeam.teamName
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-select placeholder="请选择case类型" v-model="caseform.caseType" style="width: 150px">
            <a-select-option v-for="(caseType, index) in caseTypeList" :key="index + 1">{{
              caseType.typeName
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-select placeholder="请选择case状态" v-model="caseform.caseStatus" style="width: 150px">
            <a-select-option v-for="(caseStatus, index) in caseStatusList" :key="index + 1">{{
              caseStatus.statusName
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          ><a-month-picker placeholder="请选择投产日期" style="width: 150px" v-model="caseform.caseTime"
        /></a-form-model-item>
        <a-form-model-item>
          <a-select placeholder="请选择责任人" v-model="caseform.principal" style="width: 150px">
            <a-select-option v-for="principal in principalList" :key="principal.username">{{
              principal.realname
            }}</a-select-option></a-select
          >
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }"
          ><a-button type="primary" icon="search" @click="handleSubmit">搜索</a-button></a-form-model-item
        >
        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }"
          ><a-button type="primary" icon="sync" @click="resetForm">重置</a-button></a-form-model-item
        >
      </a-form-model>
      <br />
      <!-- 主体表格内容 -->
      <div style="margin-bottom: 16px">
        <a-button type="primary" icon="plus" @click="showModal">新增</a-button>&nbsp;&nbsp;
        <a-button type="primary" :disabled="!hasexportSelected" icon="cloud" @click="exportCase">导出</a-button>&nbsp;&nbsp;
         <a-upload
            :file-list="fileListesb"
            class="upload-demo"
            :before-upload="beforeUploadesb"
            :loading="uploading"
            :remove="handleRemoveesb"
            :customRequest="handleUploadesb"
          >
            <a-button type="primary" > <a-icon type="upload" />ESB导入</a-button>
          </a-upload>&nbsp;&nbsp;
          <a-button type="primary" :disabled="!hasorderSelected" icon="safety-certificate" @click="showOrderModal"
          >分配</a-button
        >&nbsp;&nbsp;
          <a-button type="primary" :disabled="!hasSelected" icon="pushpin" @click="downloadCase">下载</a-button
        >&nbsp;&nbsp;
        <a-popconfirm title="确定要删除以下case？" @confirm="delCase">
          <a-icon slot="icon" type="question-circle-o" style="color: red" />
          <a-button type="danger" :disabled="!hasdelSelected" icon="delete">删除</a-button>
        </a-popconfirm>
      </div>
      <a-table
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data-source="data"
        :pagination="false"
        :scroll="{ x: 1850 }"
      >
        <a slot="name" slot-scope="text, record" @click="showCase(record)">{{ text }}</a>
        <a slot="action" slot-scope="text">
          <!-- 展示case编辑按钮 -->
          <a-button type="primary" :disabled="text.caseStatus!='编辑中'" icon="edit" @click="editCase(text)">编辑</a-button>
          &nbsp;
        </a>
      </a-table>
      <br />
      <!-- 分页组件 -->
      <a-pagination v-model="currentpage" :total="total" :pageSize="pageSize" @change="pageChange" />
      <!-- 新增case对话框表单 -->
      <a-modal v-model="visible" title="新增case" @ok="handleOk" width="50%">
        &nbsp;&nbsp;&nbsp;&nbsp;<a-button type="primary" @click="downloadModule">
          <a-icon type="download" />下载模板</a-button
        ><br /><br />
        <a-form-model
          :model="createform"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          :rules="rules"
          ref="ruleForm"
        >
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="项目组" prop="projectId">
                <a-select v-model="createform.projectId" style="width: 200px" default-value="1" disabled>
                  <a-select-option v-for="(projectTeam, index) in projectTeams" :key="index + 1">{{
                    projectTeam.teamName
                  }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="投产日期" prop="caseTime">
                <a-date-picker
                  placeholder="请选择投产日期"
                  format="YYYY-MM-DD"
                  style="width: 200px"
                  v-model="createform.caseTime"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="case类型" prop="caseType">
                <a-select placeholder="请选择case类型" v-model="createform.caseType" style="width: 200px">
                  <a-select-option v-for="(caseType, index) in caseTypeList" :key="index + 1">{{
                    caseType.typeName
                  }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="case描述" prop="caseDesc">
                <a-input placeholder="请输入case描述" style="width: 200px" v-model="createform.caseDesc" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-form-model-item label="case概要" :label-col="{ span: 3 }" :wrapper-col="{ span: 19 }" prop="caseInfo">
            <a-textarea placeholder="请输入case概要" v-model="createform.caseInfo" :rows="4" />
          </a-form-model-item>
          <a-form-model-item>
            <a-input type="hidden" v-model="createcaseId" />
          </a-form-model-item>
          <!-- :  oreUpload="beforeUpload" -->
          &nbsp;&nbsp;&nbsp;&nbsp;
          <a-upload
            name="file"
            :file-list="fileList"
            class="upload-demo"
            :before-upload="beforeUpload"
            :loading="uploading"
            :remove="handleRemove"
            :customRequest="handleUpload"
          >
            <a-button type="primary"> <a-icon type="upload" /> 导入需求 </a-button>
          </a-upload>
        </a-form-model>
      </a-modal>

      <!-- case详情编辑modal -->
      <a-modal v-model="editCaseModal" title="Case修改" width="80%" @ok="editOk">
        <!-- <p>{{ editCaseForm }}</p> -->
        <a-form-model :model="editCaseForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="case编号">
                <a-input v-model="editCaseForm.caseDTO.caseId" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="平台负责人">
                <a-input v-model="editCaseForm.caseDTO.principal" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="投产日期">
                <a-date-picker format="YYYY-MM-DD" v-model="editCaseForm.caseDTO.caseTime" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="项目组">
                <a-select v-model="editCaseForm.caseDTO.projectId">
                  <a-select-option v-for="(projectTeam, index) in projectTeams" :key="index + 1">{{
                    projectTeam.teamName
                  }}</a-select-option></a-select
                >
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="case类型">
                <a-select v-model="editCaseForm.caseDTO.caseType">
                  <a-select-option v-for="(caseType, index) in caseTypeList" :key="index + 1">{{
                    caseType.typeName
                  }}</a-select-option></a-select
                >
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
        <a-upload
          :file-list="fileListModal"
          :before-upload="beforeUploadModal"
          class="upload-demo"
          :remove="handleRemoveModal"
          :customRequest="handleUploadModal"
          ><a-button type="primary"> <a-icon type="upload" /> 导入修改 </a-button></a-upload
        >
        <br /><br />
        <div >
          <a-tabs type="card" v-model="defaultTabKey">
            <a-tab-pane key="0" :forceRender="forceRender"><span slot="tab"><a-icon type="file-text" />需求详情</span>
              <a-card :bordered="false" style="width: 100%">
                <a-form-model :model="editCaseForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
                  <a-row>
                    <a-col :span="8">
                      <a-form-model-item label="需求编号">
                        <a-input v-model="editCaseForm.demand.id" disabled />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="需求名称">
                        <a-input v-model="editCaseForm.demand.name" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="期望上线时间">
                        <a-date-picker format="YYYY-MM-DD" v-model="editCaseForm.demand.expectDate" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-col :span="8">
                      <a-form-model-item label="OA联系单号">
                        <a-input v-model="editCaseForm.demand.oaCode" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="业务部门">
                        <a-input v-model="editCaseForm.demand.bussinessDepart" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="平台联系人">
                        <a-input v-model="editCaseForm.demand.contact" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-col :span="8">
                      <a-form-model-item label="调用方系统">
                        <a-input v-model="editCaseForm.demand.customerSystem" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="调用方负责人">
                        <a-input v-model="editCaseForm.demand.customer" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="需求说明">
                        <!-- <a-textarea v-model="editCaseForm.demand.demandInfo" :rows="4" /> -->
                        <a-input v-model="editCaseForm.demand.description" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-col :span="8">
                      <a-form-model-item label="需求来源">
                        <a-input v-model="editCaseForm.demand.source" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="数据来源系统">
                        <a-input v-model="editCaseForm.demand.datasource" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-col :span="8">
                      <a-form-model-item label="用户查询行为">
                        <a-input v-model="editCaseForm.demand.userQuery" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="接入联机必要性">
                        <a-input v-model="editCaseForm.demand.nessessary" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </a-form-model>
              </a-card>
            </a-tab-pane>
            <a-tab-pane v-for="(addpane,index) in editCaseForm.transMap" :key="index+1" :forceRender="forceRender">
              <span slot="tab"><a-icon type="pushpin" />{{editCaseForm.transMap[index].trans.transCode}}-{{editCaseForm.transMap[index].trans.transName}}</span>
              <a-card :bordered="false">
                <a-form-model :model="editCaseForm.transMap[index].trans" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" 
                :ref="`ruleTransForm${index}`" :rules="transrules" >
                  <a-row>
                    <a-col :span="12">
                      <a-form-model-item label="交易名称" prop="transName">
                        <a-input v-model="editCaseForm.transMap[index].trans.transName" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="交易码" prop="transCode">
                        <a-select v-model="editCaseForm.transMap[index].trans.transCode" style="width: 150px">
                          <a-select-option v-for="transcode in transcodeList" :key="transcode.transCode">{{
                            transcode.transCode
                          }}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <!-- <a-col :span="8">
                      <a-form-model-item label="是否涉及分组聚合查询" prop="isGroup">
                        <a-select v-model="editCaseForm.transMap[index].trans.isGroup" style="width: 150px">
                          <a-select-option value="0">否</a-select-option>
                          <a-select-option value="1">是</a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col> -->
                  </a-row>
                </a-form-model>
                
                  <a-tabs default-active-key="1">
                    <a-tab-pane key="1">
                      <span slot="tab"><a-icon type="tags" />输入</span>
                      <a-table :columns="transcolumns" :data-source="editCaseForm.transMap[index].inputTable"></a-table>
                    </a-tab-pane>
                    <a-tab-pane key="2">
                      <span slot="tab"><a-icon type="tags" />输出</span>
                      <a-table :columns="transcolumns" :data-source="editCaseForm.transMap[index].outputTable"></a-table>
                    </a-tab-pane>
                  </a-tabs>
                
                <a-card>{{ editCaseForm.transMap[index].sql.sqlName }}</a-card>
              </a-card>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-modal>
      
       <!-- case详情展示modal -->
      <a-modal v-model="showcaseModal" title="Case详情" width="80%" @ok="showcaseOk">
        <!-- <p>{{ editCaseForm }}</p> -->
        <a-descriptions bordered :column="4">
          <a-descriptions-item label="case编号" :span="2">
            {{editCaseForm.caseDTO.caseId}}
          </a-descriptions-item>
          <a-descriptions-item label="case概要" :span="2">
            {{editCaseForm.caseDTO.caseInfo}}
          </a-descriptions-item>
          <a-descriptions-item label="项目组">
            网点平台
            <!-- {{projectTeams[editCaseForm.caseDTO.projectId]==null?null:projectTeams[editCaseForm.caseDTO.projectId].teamName}} -->
          </a-descriptions-item>
          <a-descriptions-item label="开发人员" >
           {{editCaseForm.caseDTO.principal}}
          </a-descriptions-item>
          <a-descriptions-item label="投产日期">
            {{editCaseForm.caseDTO.caseTime}}
          </a-descriptions-item>
          <a-descriptions-item label="申请人">
            {{editCaseForm.caseDTO.createBy}}
          </a-descriptions-item>
          <a-descriptions-item label="case描述">
            {{editCaseForm.caseDTO.caseDesc}}
          </a-descriptions-item>
        </a-descriptions>
        <br/><br/>
        <!-- caseStatus步骤条-->
        <a-steps
          :current="this.editCaseForm.currentCaseStatus.statusId - 1"
          type="navigation"
          size="small"
          :style="stepStyle"
        >
          <a-step
            v-for="item in this.editCaseForm.finishList"
            :key="item.statusName"
            status="finish"
            size="small"
            :title="item.statusName"
          />
          <a-step status="process" size="small" :title="this.editCaseForm.currentCaseStatus.statusName" />
          <a-step
            v-for="item in this.editCaseForm.processList"
            :key="item.statusName"
            status="wait"
            size="small"
            :title="item.statusName"
          />
        </a-steps>
        <div >
          <a-tabs type="card" defaultActiveKey="0">
            <a-tab-pane key="0" ><span slot="tab"><a-icon type="file-text" />需求详情</span>
              <a-card :bordered="false" style="width: 100%">
               <a-descriptions bordered :column="4">
                <a-descriptions-item label="需求编号" :span="2">
                  {{editCaseForm.demand.id}}
                </a-descriptions-item>
                <a-descriptions-item label="需求名称" :span="2">
                  {{editCaseForm.demand.name}}
                </a-descriptions-item>
                <a-descriptions-item label="OA联系单号">
                  {{editCaseForm.demand.oaCode}}  
                </a-descriptions-item>
                <a-descriptions-item label="业务部门" >
                {{editCaseForm.demand.bussinessDepart}}
                </a-descriptions-item>
                <a-descriptions-item label="期望上线日期">
                  {{editCaseForm.demand.expectDate}}
                </a-descriptions-item>
                <a-descriptions-item label="平台联系人">
                  {{editCaseForm.demand.contact}}
                </a-descriptions-item>
                <a-descriptions-item label="调用方系统">
                  {{editCaseForm.demand.customerSystem}}
                </a-descriptions-item>
                <a-descriptions-item label="调用方负责人">
                  {{editCaseForm.demand.customer}}
                </a-descriptions-item>
                <a-descriptions-item label="需求来源">
                  {{editCaseForm.demand.source}}
                </a-descriptions-item>
                <a-descriptions-item label="数据来源系统">
                  {{editCaseForm.demand.datasource}}
                </a-descriptions-item>
                <a-descriptions-item label="用户查询行为" :span="2">
                  {{editCaseForm.demand.userQuery}}
                </a-descriptions-item>
                <a-descriptions-item label="接入联系必要性" :span="2">
                  {{editCaseForm.demand.nessessary}}
                </a-descriptions-item>
                <a-descriptions-item label="需求说明">
                  {{editCaseForm.demand.description}}
                </a-descriptions-item>
              </a-descriptions>
              </a-card>
            </a-tab-pane>
            <a-tab-pane v-for="(addpane,index) in editCaseForm.transMap" :key="index+1" >
              <span slot="tab"><a-icon type="pushpin" />{{editCaseForm.transMap[index].trans.transCode}}-{{editCaseForm.transMap[index].trans.transName}}</span>
              <a-card :bordered="false">
                <a-descriptions bordered>
                <a-descriptions-item label="交易名称">
                  {{editCaseForm.transMap[index].trans.transName}}
                </a-descriptions-item>
                <a-descriptions-item label="交易码">  
                  {{editCaseForm.transMap[index].trans.transCode}}
                </a-descriptions-item>
                <!-- <a-descriptions-item label="是否涉及分组聚合查询">
                  {{editCaseForm.transMap[index].trans.isGroup==1?"是":"否"}}  
                </a-descriptions-item> -->
                </a-descriptions>
                <br/><br/>
                  <a-tabs default-active-key="1">
                    <a-tab-pane key="1">
                      <span slot="tab"><a-icon type="tags" />输入</span>
                      <a-table :columns="transcolumns" :data-source="editCaseForm.transMap[index].inputTable"></a-table>
                    </a-tab-pane>
                    <a-tab-pane key="2">
                      <span slot="tab"><a-icon type="tags" />输出</span>
                      <a-table :columns="transcolumns" :data-source="editCaseForm.transMap[index].outputTable"></a-table>
                    </a-tab-pane>
                  </a-tabs>
                <a-card>{{ editCaseForm.transMap[index].sql.sqlName }}</a-card>
              </a-card>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-modal>

      <!-- caseInfode Modal -->
      <a-modal v-model="caseInfoModal" title="需求概要" width="80%" @cancel="cancelCaseInfo" @ok="submitCaseInfo">
        <div >
          <a-tabs type="card">
            <a-tab-pane key="0" ><span slot="tab"><a-icon type="file-text" />需求详情</span>
              <a-card :bordered="false" style="width: 100%">
                <a-form-model :model="editCaseForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
                  <a-row>
                    <a-col :span="8">
                      <a-form-model-item label="需求编号">
                        <a-input v-model="editCaseForm.demand.id" disabled />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="需求名称">
                        <a-input v-model="editCaseForm.demand.name" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="期望上线时间">
                        <a-date-picker format="YYYY-MM-DD" v-model="editCaseForm.demand.expectDate" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-col :span="8">
                      <a-form-model-item label="OA联系单号">
                        <a-input v-model="editCaseForm.demand.oaCode" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="业务部门">
                        <a-input v-model="editCaseForm.demand.bussinessDepart" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="平台联系人">
                        <a-input v-model="editCaseForm.demand.contact" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-col :span="8">
                      <a-form-model-item label="调用方系统">
                        <a-input v-model="editCaseForm.demand.customerSystem" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="调用方负责人">
                        <a-input v-model="editCaseForm.demand.customer" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="需求说明">
                        <!-- <a-textarea v-model="editCaseForm.demand.demandInfo" :rows="4" /> -->
                        <a-input v-model="editCaseForm.demand.description" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-col :span="8">
                      <a-form-model-item label="需求来源">
                        <a-input v-model="editCaseForm.demand.source" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="数据来源系统">
                        <a-input v-model="editCaseForm.demand.datasource" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-col :span="8">
                      <a-form-model-item label="用户查询行为">
                        <a-input v-model="editCaseForm.demand.userQuery" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item label="接入联机必要性">
                        <a-input v-model="editCaseForm.demand.nessessary" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </a-form-model>
              </a-card>
            </a-tab-pane>
            <a-tab-pane v-for="(addpane,index) in editCaseForm.transMap" :key="index+1" >
              <span slot="tab"><a-icon type="pushpin" />{{editCaseForm.transMap[index].trans.transCode}}-{{editCaseForm.transMap[index].trans.transName}}</span>
              <a-card :bordered="false">
                <a-form-model :model="editCaseForm.transMap[index].trans" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" >
                  <!-- :ref="`ruleTransForm${index}`" :rules="transrules"  -->
                  <a-row>
                    <a-col :span="12">
                      <a-form-model-item label="交易名称" prop="transName">
                        <a-input v-model="editCaseForm.transMap[index].trans.transName" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="交易码" prop="transCode">
                        <a-select v-model="editCaseForm.transMap[index].trans.transCode" style="width: 150px">
                          <a-select-option v-for="transcode in transcodeList" :key="transcode.transCode">{{
                            transcode.transCode
                          }}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <!-- <a-col :span="8">
                      <a-form-model-item label="是否涉及分组聚合查询" prop="isGroup">
                        <a-select v-model="editCaseForm.transMap[index].trans.isGroup" style="width: 150px">
                          <a-select-option value="0">否</a-select-option>
                          <a-select-option value="1">是</a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col> -->
                  </a-row>
                </a-form-model>
                
                  <a-tabs default-active-key="1">
                    <a-tab-pane key="1">
                      <span slot="tab"><a-icon type="tags" />输入</span>
                      <a-table :columns="transcolumns" :data-source="editCaseForm.transMap[index].inputTable"></a-table>
                    </a-tab-pane>
                    <a-tab-pane key="2">
                      <span slot="tab"><a-icon type="tags" />输出</span>
                      <a-table :columns="transcolumns" :data-source="editCaseForm.transMap[index].outputTable"></a-table>
                    </a-tab-pane>
                  </a-tabs>
                
                <a-card>{{ editCaseForm.transMap[index].sql.sqlName }}</a-card>
              </a-card>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-modal>

      <!-- 分配modal -->
      <a-modal v-model="orderModal" title="分配开发人员" width="20%" @ok="orderCase">
      
            <a-select placeholder="请选择开发人员"  style="width: 250px">
              <a-select-option value="wangjie">王杰</a-select-option>
              </a-select
            >
         
      </a-modal>
    </div>
  </a-card>
</template>

<script>
import {
  getCaseStatus,
  getTypeList,
  getProTeamList,
  addCase,
  getDevCaseList,
  getCaseDetail,
  editCase,
  delCase,
  uploadFile,
  downloadModule,
  modifyExcel,
  cacelCase,
  getPrincipalList,
  exportCase,
  downloadFile,
  downloadESB,
  uploadesbFile,
  orderCase
} from '@/api/case/case'
import { getStore } from '@/utils/storage'
import { getTranCodeList,} from '@/api/trans/tran'
import moment from 'moment'
import 'moment/locale/zh-cn'
export default {
  data() {
    return {
      orderModal:false,
      orderform: {},
      defaultTabKey:'0',
      forceRender:true,
      devform:{},
      showcaseModal:false,
      deveditModal:false,
      fileaddress:'',
      createcaseId: '',
      caseInfoModal: false,
      moment,
      transcodeList: [],
      transcolumns: [
        { title: '英文名称', dataIndex: 'enName', key: 'enName', width: 200 },
        { title: '中文名称', dataIndex: 'cnName', key: 'cnName', width: 200 },
        { title: '数据类型', dataIndex: 'dataType', key: 'dataType', width: 200 },
        { title: '是否必输', dataIndex: 'inputNeccessary', key: 'inputNeccessary', width: 200 },
        { title: '查询逻辑', dataIndex: 'queryLogic', key: 'queryLogic', width: 600 },
      ],
      uploading: false,
      currentpage: 1,
      total: 0,
      pageSize: 8,
      editCaseForm: {
        caseDTO: { caseStatus: 0, projectId: '', caseType: '' },
        finishList: {},
        processList: {},
        currentCaseStatus: { statusId: 0 },
        demand: {},
        transMap:[],
        trans:{},
        sql:{}
      },
      stepStyle: {
        marginBottom: '60px',
        boxShadow: '0px -1px 0 0 #e8e8e8 inset',
      },
      editCaseModal: false,
      visible: false,
      caseform: {
        caseId: '',
        caseTime: '',
      },
      fileList: [],
      fileListesb: [],
      fileListModal: [],
      principalList: [],
      caseStatusList: [],
      caseTypeList: [],
      projectTeams: [],
      data: [],
      columns: [
        { title: 'case编号', dataIndex: 'caseId', key: 'caseId', fixed: 'left', scopedSlots: { customRender: 'name' },},
        { title: '项目组', dataIndex: 'projectId', key: 'projectId', width: 120 },
        { title: 'case类型', dataIndex: 'caseType', key: 'caseType', width: 220 },
        { title: 'case概要', dataIndex: 'caseDesc', key: 'caseDesc', width: 250 },
        { title: '投产日', dataIndex: 'caseTime', key: 'caseTime', width: 150 },
        { title: 'case状态', dataIndex: 'caseStatus', key: 'caseStatus', width: 120 },
        { title: '开发负责人', dataIndex: 'principal', key: 'principal', width: 120 },
        { title: '最后更新时间', dataIndex: 'modifyTime', key: 'modifyTime', width: 150 },
        { title: '申请人', dataIndex: 'createBy', key: 'createBy', width: 120 },
        { title: '提交时间', dataIndex: 'createTime', key: 'createTime', width: 150 },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          width: 130,
          scopedSlots: { customRender: 'action' },
        },
      ],
      selectedRowKeys: [], // Check here to configure the default column
      createform: {
        projectTeam: undefined,
        caseType: undefined,
        caseTime: undefined,
        caseDesc: '',
        caseInfo: '',
      },
      rules: {
        projectId: [{ required: true, message: '请选择一个项目组', trigger: 'blur' }],
        caseType: [{ required: true, message: '请选择一个case类型', trigger: 'change' }],
        caseTime: [{ required: true, message: '请选择投产时间', trigger: 'change' }],
        caseDesc: [{ required: true, message: 'case描述不能为空', trigger: 'change' }],
      },
      transrules: {
        transName: [{ required: true, message: '请输入交易名称', trigger: 'blur' }],
        transCode: [{required: true, message: '交易码不能为空', trigger: 'change'}],
        isGroup: [{ required: true, message: '是否涉及分组聚合查询', trigger: 'change' }],
      },
      selectCase: [],
    }
  },

  created() {
    this.getStatusList()
    this.getTypeList()
    this.getProTeamList()
    this.getCaseList()
    this.getTranCodeList()
    this.getPrincipal()
  },

  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    hasorderSelected() {
      let statusList = this.selectCase.map((item) => item.caseStatus)
      let auditflag = true
      for (var i = 0; i < statusList.length; i++) {
        if (statusList[i] != '分配中') {
          auditflag = false
        }
      }
      return this.selectedRowKeys.length > 0 && auditflag
    },
    hasdelSelected() {
      let statusList = this.selectCase.map((item) => item.caseStatus)
      let auditflag = true
      for (var i = 0; i < statusList.length; i++) {
        if (statusList[i] != '编辑中') {
          auditflag = false
        }
      }
      return this.selectedRowKeys.length > 0 && auditflag
    },
    hasexportSelected(){
      let statusList = this.selectCase.map((item) => item.caseStatus)
      let auditflag = true
      for (var i = 0; i < statusList.length; i++) {
        if (statusList[i] != '申请接口中') {
          auditflag = false
        }
      }
      return this.selectedRowKeys.length > 0 && auditflag
    }
  },

  methods: {
    onSelectChange(selectedRowKeys) {
      var selectCase = []
      for (var i = 0; i < selectedRowKeys.length; i++) {
        selectCase.push(this.data[selectedRowKeys[i]])
      }
      this.selectCase = selectCase
      this.selectedRowKeys = selectedRowKeys
    },

    handleSubmit() {
      this.selectedRowKeys = []
      getDevCaseList(this.caseform, 1, this.pageSize,getStore('pro__Login_Username').value).then((res) => {
        this.data = res.result.caseDTO
        this.total = res.result.total
      })
    },

    resetForm() {
      this.selectedRowKeys = []
      this.caseform = {
        caseId: '',
        caseTime: '',
      }
      getDevCaseList(this.caseform, 1, this.pageSize,getStore('pro__Login_Username').value).then((res) => {
        this.data = res.result.caseDTO
        this.total = res.result.total
      })
    },

    getStatusList() {
      getCaseStatus().then((res) => {
        this.caseStatusList = res.result
      })
    },

    getTranCodeList() {
      getTranCodeList().then((res) => {
        if (res.code == 200) {
          this.transcodeList = res.result
        }
      })
    },

    editCase(text) {
      this.fileListModal = []
      this.transInputdata = []
      this.transOutputdata = []
      getCaseDetail(text.caseId).then((res) => {
        this.editCaseForm.caseDTO = res.result.caseDTO
        this.editCaseForm.finishList = res.result.finishList
        this.editCaseForm.processList = res.result.processList
        this.editCaseForm.currentCaseStatus = res.result.currentCaseStatus
        this.editCaseForm.demand=res.result.demand
        this.editCaseForm.transMap=res.result.transMap
      })
      
      this.editCaseModal = true
    },

    getTypeList() {
      getTypeList().then((res) => {
        this.caseTypeList = res.result
      })
    },

    getProTeamList() {
      getProTeamList().then((res) => {
        this.projectTeams = res.result
      })
    },

    showModal() {
      this.uploading = false
      this.fileList = []
      this.createform = {
        projectId: 1,
        caseType: undefined,
        caseTime: undefined,
        caseDesc: '',
        caseInfo: '',
      }
      ;(this.createcaseId = ''), (this.visible = true)
    },

    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.createcaseId == '') {
            this.$message.error('请导入需求')
            return false
          } else {
            addCase(
              this.createform,
              this.editCaseForm,
              this.createcaseId,
              getStore('pro__Login_Username').value,
            ).then((res) => {
              if (res.code == 200) {
                this.getCaseList()
                this.$message.success(res.result)
              } else {
                this.$message.error(res.message)
              }
            })
            this.visible = false
          }
        } else {
          return false
        }
      })
    },

    handleRemove(file) {
      this.fileList = []
    },

    handleRemoveModal(file) {
      this.fileListModal = []
    },

     handleRemoveesb(file) {
      this.fileListesb = []
    },

    beforeUpload(file) {
      var fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
      var isXlsxOrXls = fileName != 'xlsx' && fileName != 'xls'
      var fileLength = this.fileList.length > 0
      if (fileLength) {
        this.$message.error('只能上传一张表格!')
      } else if (isXlsxOrXls) {
        this.$message.error('文件类型必须是xls或xlsx!')
      } else {
        this.fileList = [...this.fileList, file]
        return true
      }
      return false
    },

    beforeUploadesb(file) {
      var fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
      var isXlsxOrXls = fileName != 'xlsx' && fileName != 'xls'
      var fileLength = this.fileListesb.length > 0
      if (fileLength) {
        this.$message.error('只能上传一张表格!')
      } else if (isXlsxOrXls) {
        this.$message.error('文件类型必须是xls或xlsx!')
      } else {
        this.fileListesb = [...this.fileListesb, file]
        return true
      }
      return false
    },

    beforeUploadModal(file) {
      var fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
      var isXlsxOrXls = fileName != 'xlsx' && fileName != 'xls'
      var fileLength = this.fileListModal.length > 0
      if (fileLength) {
        this.$message.error('只能上传一张表格!')
      } else if (isXlsxOrXls) {
        this.$message.error('文件类型必须是xls或xlsx!')
      } else {
        this.fileListModal = [...this.fileListModal, file]
        return true
      }
      return false
    },


    //新增case处的导入excel按钮
    handleUpload() {
      let formData = new FormData()
      formData.append('file', this.fileList[0])
      formData.append('createBy', getStore('pro__Login_Username').value)
      formData.append('caseId', '')
      this.uploading = true
      uploadFile(formData).then((res) => {
        if (res.code == 200) {
          this.editCaseForm.demand = res.result.demand
          this.editCaseForm.transMap=res.result.transMap
          this.createcaseId = res.result.caseId
          this.caseInfoModal = true
          this.uploading = false
        } else {
          this.uploading = false
          this.$message.error(res.message)
        }
      })
    },

    //编辑按钮中的导入
    handleUploadModal() {
      let formData = new FormData()
      formData.append('file', this.fileListModal[0])
      formData.append('createBy', getStore('pro__Login_Username').value)
      formData.append('caseId', this.editCaseForm.caseDTO.caseId)
      uploadFile(formData).then((res) => {
        let temp = this.editCaseForm.demand.id
        if (res.code == 200) {
          this.editCaseForm.demand = res.result.demand
          this.editCaseForm.demand.id = temp
          this.editCaseForm.transMap=res.result.transMap
          this.uploading = false
          this.$message.success('导入成功')
        } else {
          this.uploading = false
          this.$message.error(res.message)
        }
      })
    },

    handleUploadesb() {
      let formData = new FormData()
      formData.append('file', this.fileListesb[0])
      formData.append('caseId', '')
      this.uploading = true
      uploadesbFile(formData).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.result)
          this.uploading = false
          this.fileListesb=[];
          this.getCaseList();
        } else {
          this.uploading = false
          this.$message.error(res.message)
        }
      })
    },

    getCaseList() {
      getDevCaseList(this.caseform, this.currentpage, this.pageSize,getStore('pro__Login_Username').value).then((res) => {
        this.data = res.result.caseDTO
        this.total = res.result.total
      })
    },

    editOk() {
      //受不了了，後端去驗證合法性
      editCase(this.editCaseForm).then((res) => {
        //console.log(res)
        if (res.code == 200) {
          this.getCaseList()
          this.$message.success('case修改成功')
          this.editCaseModal = false
        } else {
          this.$message.error(res.message)
          this.editCaseForm.trans.transCode=undefined
        }
      })
    },

    pageChange() {
      this.selectedRowKeys = []
      getDevCaseList(this.caseform, this.currentpage, this.pageSize,getStore('pro__Login_Username').value).then((res) => {
        this.data = res.result.caseDTO
        this.total = res.result.total
      })
    },

    delCase() {
      delCase(this.selectCase.map((item) => item.caseId)).then((res) => {
        if (res.code == 200) {
          this.getCaseList()
          this.$message.success('case删除成功')
          this.selectedRowKeys = []
        } else {
          this.$message.error(res.message)
        }
      })
    },
showOrderModal() {
      ;(this.orderform = {}), (this.orderModal = true)
    },

    downloadModule() {
      downloadModule('HDS模板.xlsx').then((res) => {
        let blob = new Blob([res], {
          type: 'application/vnd.ms-excel', //将会被放入到blob中的数组内容的MIME类型
        })
        let objectUrl = URL.createObjectURL(blob) //生成一个url
        let a = document.createElement('a')
        a.href = objectUrl
        a.download = 'HDS模板.xlsx'
        a.click()
        window.URL.revokeObjectURL(objectUrl)
      })
    },

    submitCaseInfo() {
      //此处需要设置验证规则(防止页面中数据漏填)
      modifyExcel(this.editCaseForm,this.createcaseId).then((res) => {
        if (res.code == 200) {
          this.$message.success('case需求导入成功')
          this.editCaseForm.transMap=res.result;
          this.caseInfoModal = false
        } else {
          this.$message.error(res.message)
          //this.editCaseForm.trans.transCode=undefined
        }
      })
  
    },

    cancelCaseInfo() {
      cacelCase(this.createcaseId).then((res) => {
        this.fileList = []
        this.createcaseId = ''
        this.caseInfoModal = false
      })
    },

    downloadCase(){
       this.selectCase.map(item=>{
         downloadFile('HDS-'+item.caseId+'.xlsx').then(res=>{
             let blob = new Blob([res], 
                      {type: 'application/vnd.ms-excel', //将会被放入到blob中的数组内容的MIME类型
                      })
                      let objectUrl = URL.createObjectURL(blob) //生成一个url
                      let a = document.createElement('a')
                      a.href = objectUrl
                      a.download = item.caseId
                      a.click()
                      window.URL.revokeObjectURL(objectUrl)
         })
       })
    },

    getPrincipal() {
      getPrincipalList().then((res) => {
        this.principalList = res.result
      })
    },
orderCase() {
      orderCase(
        this.selectCase.map((item) => item.caseId),
      ).then((res) => {
        if (res.code == 200) {
          this.getCaseList()
          this.$message.success('case分配成功')
          this.selectedRowKeys = []
          this.orderModal = false
        } else {
          this.$message.error(res.message)
        }
      })
    },

    exportCase(){
      let caseId=this.selectCase.map(item=>item.caseId);
      exportCase(caseId).then(res=>{
        if(res.code==200){
          this.fileaddressModel=true;
          this.fileaddress=res.result;
          let fileaddress=res.result;
          this.$success({
                title: '文件导出成功',
                content: this.$createElement('div', {}, res.result.map(item=>this.$createElement('p', item))),
                okText: '下载文件',
                onOk(){
                    fileaddress.map(item=>{
                      downloadESB(item).then(res=>{
                      let filename=item.split('/');
                      let blob = new Blob([res], 
                      {type: 'application/vnd.ms-excel', //将会被放入到blob中的数组内容的MIME类型
                      })
                      let objectUrl = URL.createObjectURL(blob) //生成一个url
                      let a = document.createElement('a')
                      a.href = objectUrl
                      a.download = filename[filename.length-1]
                      a.click()
                      window.URL.revokeObjectURL(objectUrl)
                    })
                    })
                },
            });  
        }else{
          this.$message.error(res.message)
        }
      })
    },
     
    showCase(text){
      this.transInputdata = []
      this.transOutputdata = []
      getCaseDetail(text.caseId).then((res) => {
        this.editCaseForm.caseDTO = res.result.caseDTO
        this.editCaseForm.finishList = res.result.finishList
        this.editCaseForm.processList = res.result.processList
        this.editCaseForm.currentCaseStatus = res.result.currentCaseStatus
        this.editCaseForm.demand=res.result.demand
        this.editCaseForm.transMap=res.result.transMap
      })
      this.showcaseModal = true
    },  
    
    showcaseOk(){
      this.showcaseModal = false
    },

    importCase(){

    }
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
.upload-demo {
  display: inline-block;
}
.card-container {
  background: #f5f5f5;
  overflow: hidden;
  padding: 24px;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}
.editable-add-btn {
  margin-bottom: 8px;
}
.ant-table-row-expand-icon {
  display: none;
}
</style>